<template>
	<view class="content">
		<!-- 地址 -->
		<view class="site" @click="goAddress">
			<view class="site-name">
				<view class="site-name1">{{addres.name}}</view>
				<view class="site-name2">{{addres.phone}}</view>
			</view>
			<view class="site-content">
				<view class="site-content-icon">
					<image src="../../static/indet/indet4.png" mode=""></image>
				</view>
				<view class="site-content-site">
					<!-- 山东省济南市先行区王大佬庄183号无名氏街道蛋蛋花园一号楼12单元1128 -->
					{{addres.dizhi}}
				</view>
				<view class="site-content-icon2">
					<image src="../../static/indet/indet6.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="cart">
			<view class="cart-img">
				<image :src="WaresIdDetail.waresImgs" mode=""></image>
			</view>
			<view class="cart-name">
				<view class="cart-name1">
					{{WaresIdDetail.waresContent}}
				</view>
				<view class="cart-name2">
					<span>{{WaresIdDetail.waresPrice}}虚拟币</span>
					<span class="span1">x1</span>
				</view>
				<view class="cart-name3">
					已选 海蓝色 | 256GB | 公开版 1件
				</view>
			</view>
		</view>
		<!-- 数量配送方式 -->
		<view class="order">
			<view class="order1">
				<view class="order1-content">购买数量</view>
				<view class="order1-content">2</view>
			</view>
			<view class="order2">
				<view class="order2-content">配送方式</view>
				<view class="order2-content">快递包邮</view>
			</view>
			<view class="order3">
				<view class="order3-content">订单备注</view>
				<view class="order3-content2">选填，先和商家协商一致</view>
			</view>
		</view>
		<!-- 兑换方式 -->
		<view class="conversion">
			<view class="conversion-title">
				<view class="conversion-title1">兑换方式</view>
				<view class="conversion-title2">
					<view>自用</view>
					<view class="conversion-title3">
						<image src="../../static/indet/indet8.png" mode=""></image>
					</view>
				</view>
			</view>
		<!-- 	<view class="conversion-content" v-for="(item,index) in items">
				<view class="conversion-content1">
					<view class="conversion-content3">
						<image :src="item.images" mode=""></image>
					</view>
					<view class="conversion-content4">
						{{item.name}}
					</view>
				</view>
				<view class="conversion-content2" @click="qirhuan(index)">
					<image :src="item.image" mode=""></image>
				</view>
			</view> -->
			<!-- **************** -->
			<!-- 实例 -->
		<!-- 	<view class="conversion-content">
				<view class="conversion-content1">
					<view class="conversion-content3">
						<image src="../../static/indet/indet2.png" mode=""></image>
					</view>
					<view class="conversion-content4">
						赠品币（78382）
					</view>
				</view>
				<view class="conversion-content2">
					<image src="../../static/indet/indet5.png" mode=""></image>
				</view>
			</view> -->
			  <view class="uni-list">
			             <radio-group @change="radioChange" class="uni-list-cell">
			                 <label class="uni-list-cell1 uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
								  <view class="uni-list-cell2">
								  	<view class="uni-list-cell-img">
								  		 <image :src="item.images" mode=""></image></view>
								  	<view class="uni-list-cell-name">{{item.name}}</view>
								  </view>
			                     <view class="uni-list-cell3">
			                         <radio :value="item.value" :checked="index === current" style="transform:scale(0.7)"/>
			                     </view>
			                    
			                 </label>
			             </radio-group>
			         </view>
			<!-- 文字 -->
			<!-- ******************* -->
			<view class="text">
				<view class="text-title1">
					费用计算规则： <br>
					兑换币：可无条件的选择兑换赠品区的产品，如果需寄售该产品，则需缴纳30%手续费（金钻）。
				</view>
				<view class="text-title2">

					赠品币：用赠品币需另付要购买的商品价格的30%金钻来进行兑换购买，兑换成功后可以选择直接寄售；但是选择寄售需再付出30%的金钻服务费和1%的现金（此处的费用均在成交后在成交额中扣除）来进行寄售，寄售的兑换商品可更改价格
				</view>
			</view>
		</view>
		<!-- 结算区域 -->
		<view class="botton-btn">
			<view class="bottom-btn1">
				合计：
				<span>￥0.00</span>
			</view>
			<view class="bottom-btn2" @click="goTijiao()">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	// import swiperTabHead from './address.vue'
	export default {
		// components:{
		//     carList,
		// 	swiperTabHead
		// },
		data() {
			return {
				orderId:'',//订单ID
				actualPrice:'',// 需支付金额
				
				// 地址栏
				addres: '',
				items: [{
						value: 'YJQB',
						name: '佣金钱包（￥2738.82）',
						images: "../../static/indet/indet9.png",
						image: "../../static/indet/indet5.png"
					},
					{
						value: 'WX',
						name: '微信',
						checked: 'true',
						images: '../../static/indet/indet11.png',
						image: "../../static/indet/indet5.png"
					},
					{
						value: 'ZFB',
						name: '支付宝',
						checked: 'true',
						images: '../../static/indet/indet10.png',
						image: "../../static/indet/indet5.png"
					},
					
					{
						value: 'YSF',
						name: '云闪付',
						checked: 'true',
						images: '../../static/indet/indet12.png',
						image: "../../static/indet/indet5.png"
					}
				],
				current: 0,// 支付方式1微信 2支付宝 3云闪付
				waresId: '',
				WaresIdDetail: [],
				waresPrice: '0', // 寄售商品价格
				waresId: '0',// 寄售商品ID
				walletPrice:'0',// 余额支付金额（未用传0
				actualPrice:'',//实付金额
				address:'山东省济南市先行区王大佬庄183号无名氏街道多娜多娜花园一号楼王大锤18868866622',// 收货地址
				ucId:'',//优惠券ID（无优惠券不
				discount:'0',//优惠券抵扣金额未用传0
				show2: false,
				orderId:'',// 订单ID
				orderInfo:'',// 支付宝签名信息
				paySign:'',//微信签名信息
			};
		},
		onLoad(options) {
			console.log(options,'---------------------------')
			this.waresId = options.waresId
			this.waresPrice = options.waresPrice
			// this.content1 = JSON.parse(options.content1)
			this.content1 = options.content1
			console.log(this.waresId, this.waresPrice, this.content1)
			this.daiZhifu()
		},
		methods: {
			//待支付订单
			daiZhifu() {
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleOrders/idleOrderSave',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						waresId: that.waresId, // 寄售商品ID
						waresPrice: that.waresPrice, // 寄售商品价格
						walletPrice: that.walletPrice, // 余额支付金额
						actualPrice: that.waresPrice, // 实付金额
						address: that.address, // 收货地址
						discount: that.discount //优惠券抵扣金额
					},
					afterAjax: (res) => {
						console.log(res, '待支付订单接口')
						if (res.code !== 200) {
							console.log(res.data, '待支付订单接口错误')
						}
						if (res.code == 200) {
							console.log('待支付订单通了')
							that.orderId = res.orderId
							console.log(that.orderId, '订单id拿到了')
							uni.showToast({
								title: '待支付订单接口',
								icon: 'none'
							})
						}
					}
				})
			},
			// 寄售商品详情
			jsDetail() {
				var that = this
				that.$http.req.ajax({
					path: ':8090/web/idleWares/idleWaresDetail',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						waresId: this.waresId,
					},
					afterAjax: (res) => {
						console.log(res, '详情')
						this.WaresIdDetail = res.data
					}
				})
			},
			qirhuan(num) {
				this.items.forEach((el, index) => {
					if (num == index) {
						if (el.image == '../../static/indet/indet5.png') {
							el.image = '../../static/indet/indet1.png'
						} else {
							el.image = '../../static/indet/indet5.png'
						}
					}
				})
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				console.log(this.current)
			},
			goAddress() {
				uni.navigateTo({
					url: './address?name=' + 1
				})
			},
			goTijiao() {
				var that = this
				if(this.current == 0) {
					console.log('调用了佣金钱包')
				}
				if(this.current == 1) {
					console.log('调用了微信')
					that.$http.req.ajax({
						path: ':8090/web/idleOrders/idleOrderPaySign',
						header: {
							'token': uni.getStorageSync('token')
						},
						data: {
							orderId: that.orderId,//订单ID
							actualPrice: '100',// 需支付金额
							payType:that.current
						},
						afterAjax: (res) => {
							console.log(res,'微信支付签名接口')
							if (res.code !== 200) {
								that.paySign = res.paySign
								console.log(that.paySign,'微信签名没有拿到')
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								
								console.log(res.msg,'微信签名没有拿到')
							}
							if (res.code == 200) {
								that.paySign = res.paySign
								console.log('微信签名通了')
								uni.showToast({
									title: '微信签名',
									icon: 'none'
								})
							}
						}
					})
				}
				if(this.current == 2) {
					console.log('调用了支付宝')
					that.$http.req.ajax({
						path: ':8090/web/idleOrders/idleOrderPaySign',
						header: {
							'token': uni.getStorageSync('token')
						},
						data: {
							orderId: that.orderId,//订单ID
							actualPrice:'100',// 需支付金额
							payType:that.current
						},
						afterAjax: (res) => {
							console.log(res,'支付宝签名接口')
							if (res.code !== 200) {
								that.orderInfo = res.orderInfo
								console.log(that.paySign,'支付宝签名没有拿到')
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								console.log(res.msg,'支付宝签名拿到')
							}
							if (res.code == 200) {
								that.orderInfo = res.orderInfo
								console.log('支付宝签名通了')
								uni.showToast({
									title: '支付宝签名',
									icon: 'none'
								})
							}
						}
					})
				}
				if(this.current == 3) {
					console.log('调用了云闪付')
				}
				
				// that.$http.req.ajax({
				// 	path: ':8090/web/idleOrders/idleOrderSave',
				// 	header: {
				// 		'token': uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		waresId: this.waresId,
				// 		waresPrice: this.WaresIdDetail.waresPrice,
				// 		walletPrice: this.waresId,
				// 		actualPrice: this.waresId,
				// 		address: this.waresId,
				// 		ucId: this.waresId,
				// 		discount: this.waresId,
				// 	},
				// 	afterAjax: (res) => {
				// 		console.log(res, '详情')
				// 	}
				// })
				// uni.showToast({
				// 	title:'提交成功'
				// })
				// uni.switchTab({
				// 	url:'../home/home'
				// })
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-width: 722rpx;
		max-width: 1358rpx;
		margin: 0 auto;
		background-color: #F5F5F5;

		// 地址信息
		.site {
			background-color: #FFFFFF;
			border-radius: 14rpx;
			margin: 25rpx;
			position: relative;
			top: 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.site-name {
				display: flex;
				flex-direction: row;
				justify-content: space-left;
				margin: 27rpx 108rpx 9rpx 108rpx;
				.site-name1 {
					font-size: 28rpx;
					font-weight: 600;
				}
				.site-name2 {
					font-size: 21rpx;
					color: #626262;
					margin-left: 14rpx;
				}
			}

			.site-content {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.site-content-icon {
					width: 65rpx;
					height: 65rpx;
					margin: 0 27rpx 25rpx 27rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.site-content-site {
					font-size: 21rpx;
					color: #626262;
				}

				.site-content-icon2 {
					width: 18rpx;
					height: 25rpx;
					margin-right: 25rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}
			}
		}

		// 商品信息
		.cart {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: #FFFFFF;
			margin: 25rpx 25rpx 0 25rpx;
			position: relative;
			top: 25rpx;

			.cart-img {
				margin: 25rpx;
				width: 231rpx;
				height: 231rpx;

				image {
					max-width: 100%;
					max-height: 100%;
				}
			}

			.cart-name {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 21rpx;

				.cart-name1 {
					font-size: 21rpx;
				}

				.cart-name2 {
					font-size: 21rpx;
					color: #686868;

					.span1 {
						margin-left: 60%;
					}
				}

				.cart-name3 {
					font-size: 21rpx;
					background-color: #f5f5f5;
					color: #8b8b8b;
				}
			}
		}

		// 数量配送
		.order {
			background-color: #FFFFFF;
			margin: 0 25rpx 25rpx 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.order1 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 25rpx;
				font-size: 21rpx;
			}

			.order2 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 25rpx;
				font-size: 21rpx;
			}

			.order3 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 25rpx;
				font-size: 21rpx;

				.order3-content2 {
					color: #828282;
				}
			}
		}

		// 兑换方式
		.conversion {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 25rpx;
			background-color: #FFFFFF;
			border-radius: 14rpx;

			.conversion-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 25rpx;

				.conversion-title1 {
					font-size: 28rpx;
					font-weight: 600;
				}

				.conversion-title2 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 25rpx;
					color: #21202d;
					width: 104rpx;
					height: 36rpx;

				}

				.conversion-title3 {
					width: 39rpx;
					height: 39rpx;

					image {
						max-width: 60%;
						max-height: 100%;
					}
				}
			}



			.conversion-content {
				line-height: 123rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.conversion-content1 {
					margin: 0 25rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.conversion-content3 {
						margin: 32rpx 21rpx 32rpx 0;
						width: 57rpx;
						height: 57rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}

					.conversion-content4 {
						margin-top: 5%;
						font-size: 25rpx;
					}
				}

				.conversion-content2 {
					width: 36rpx;
					height: 36rpx;
					margin: 18rpx 25rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}
			}

		}

		// 文字
		.text {

			font-size: 25rpx;
			color: #959595;
			margin: 25rpx;
			width: 699rpx;
			// height: 289rpx;
			line-height: 50rpx;

			.text-title1,
			.text-title2 {
				margin: 25rpx;
				padding-bottom: 30rpx;
			}

			.text-title1 {
				padding-right: 30rpx;
			}

			.text-title2 {
				margin: 25rpx;
				padding-bottom: 120rpx;
				padding-right: 30rpx;
			}
		}

		// 底部按钮
		.botton-btn {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 105rpx;
			width: 749rpx;

			.bottom-btn1 {
				margin: 32rpx 25rpx;
				font-size: 25rpx;

				span {
					color: #FF6034;
					font-size: 28rpx;
				}
			}

			.bottom-btn2 {
				margin-right: 5%;
				width: 202rpx;
				height: 79rpx;
				border-radius: 39rpx;
				background-color: #fcda22;
				text-align: center;
				font-size: 25rpx;
				font-weight: 700;
				margin-top: 2%;
				line-height: 79rpx;

			}
		}
		.uni-list {
			margin: 0 25.36rpx;
			.uni-list-cell {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.uni-list-cell1 {
					width: 648.55rpx;
					height: 123.18rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.uni-list-cell2 {
						padding: 32.6rpx 0;
						display: flex;
						flex-direction: row;
						justify-content:flex-start;
						.uni-list-cell-name {
							font-size: 25.36rpx;
							font-weight: 600;
							margin-left: 21.73rpx;
						}
						.uni-list-cell-img {
							width: 57.97rpx;
							height: 57.97rpx;
							image {
								max-width: 100%;
								max-height: 100%;
							}
						}
					}
					.uni-list-cell3 {
						margin: 43.47rpx 25.36rpx 43.47rpx 0;
					}
				}
				
			}
		}
	}
</style>
